<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('省市区列表')" />
	<style type="text/css">

		.selection{background: #d6d5d5;color: #ed5565;}

	</style>
</head>
<body class="gray-bg">
<div class="container-div">
	<div class="row">

		<div class="col-sm-12 select-table table-striped">

			<div class="col-sm-12 row" style="padding: 0">

				<div class="col-sm-6" style="padding: 0; margin: 0;margin-top: 16px;">
					<from>
						<div class="form-group col-sm-12">
							<label for="areaName">区域名称</label>
							<input type="text" class="form-control" th:value="${area.areaName}" id="areaName" placeholder="区域名称">
							<input type="hidden" name="areaCode" th:value="${area.areaCode}" id="areaCode">
						</div>
						<div class="form-group col-sm-12">
							<label for="areaOfarea">区域所属大区</label>
							<select id="areaOfarea"  name="select" class="selectpicker show-tick form-control" data-live-search="false" data-actions-box="false">
							</select>
						</div>
						<div class="form-group col-sm-12">
							<label for="status">状态</label>
							<select id="status" name="select" th:value="${area.status}" class="selectpicker show-tick form-control" data-live-search="false" data-actions-box="false">
								　　<option value="0" th:selected="${area.status == '0'}">启用</option>
								　　<option value="1" th:selected="${area.status == '1'}">停用</option>
							</select>
							 <!--<button onclick="submitHandler()">测试提交</button> -->
						</div>

					</from>
				</div>

					<div class="col-sm-5">
						<div id="area" class="transferBox col-sm-12" style="height: 500px;overflow-y: auto">
							<h3 class="unselectTitle" style="margin: 0;padding: 5px 0 10px 0;">选择区域</h3>
							<!--<table id="areaTable"></table>-->
							<div class="zTreeDemoBackground left">
								<ul id="treeDemo" class="ztree"></ul>
							</div>
						</div>

					</div>

				</div>

			</div>

		</div>
	</div>
</div>
<div th:include="include :: footer"></div>
<div th:include="include :: ztree-three"></div>

<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:city:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:city:remove')}]];
    var prefix =  "/admin/system/city";
	var areaCode = $("#areaCode").val();
    var parentCode= getQueryString("parentCode");
	var area = [];


    // 初始化所选省对应的市
	function initArea1(){
        var zTreeObj = $.fn.zTree.init( $("#treeDemo"), {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable: true
					}
				}
			}, area);
        $.fn.zTree.getZTreeObj("treeDemo").setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
    }

    // 获取所属大区
    http(ctx + '/system/area/list?areaCode='+areaCode,'post','',function (res) {
        var rows = res.rows;
        var option ='';
        console.log(rows)
        rows.forEach(function (v) {
            if(v.areaCode == parentCode){
                option += '<option selected value="'+v.areaCode+'">'+v.areaName+'</option>';
            }else{
                option += '<option value="'+v.areaCode+'">'+v.areaName+'</option>';
            }
        });
        $("#areaOfarea").html(option);
        $("#areaOfarea").selectpicker('refresh');

    });

    // 获取所有省市区数据
    http(prefix + '/cityList?areaCode='+areaCode,'get','',function (res) {
        area = res;
        area.forEach(function (v) {
            v.pId = v.parentCode == 0 ? null : v.parentCode;
            v.id = v.cityCode == 0 ? null : v.cityCode;
            v.checked = v.type == 2 ? true : false;
            v.open = v.level < 1 ? true : false;
            v.chkDisabled = v.type == 1 ? true : false;
        });

        initArea1()

    });


    // 选中区域ajax请求
    function submitHandler(fun) {
        /**
		 *
		 * check_Child_State
		 * -1	不存在子节点 或 子节点全部设置为 nocheck = true
         * 0	无 子节点被勾选
         * 1	部分 子节点被勾选
         * 2	全部 子节点被勾选
		 *
		 * */
		var truenode = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes(true);

        var submitCodes = [];
        var submitParentsCodes = [];

        var submitName=$("#areaName").val();
		var submitStatus=$("#status").val();

        if(!$("#areaName").val()){
            $.modal.msgError("请输入区域名称！");
            return false;
        }else if(!$("#areaOfarea").val()){
            $.modal.msgError("请选择区域所属大区！");
            return false;
        }else if(truenode.length < 1){
            $.modal.msgError("请选择省市区！");
            return false;
        }

        // console.log(truenode)
        truenode.forEach(function (v) {
            var obj = {
                check_Child_State:0,
                cityCode:v.cityCode,
                name:v.name,
                level:v.level,
                parentCity:v.parentCode
            };
            if(v.level >= 1){
                if(submitCodes[v.parentCode+10000]){
                    submitCodes[v.parentCode+10000].push(obj)
                }else{
                    submitCodes[v.parentCode+10000]=[];
                    submitCodes[v.parentCode+10000].push(obj)
                }
			}else{
                submitCodes.push(obj)
			}
            submitParentsCodes.push(obj)
        });

        truenode.forEach(function (v) {
            if(v.level == 1 ){
                var len1 = v.children.length;
                var len11 = 0
                var len21 = 0
                for(var i = 0;i<len1;i++){
                    len11 = len11 + v.children[i].children.length
					if(submitCodes[v.children[i].cityCode+10000])
                    	len21 = len21 + submitCodes[v.children[i].cityCode+10000].length
				}

				if(len11 == len21){
                    submitParentsCodes.forEach(function (val) {
                        if(val.cityCode == v.cityCode){
                            val.check_Child_State = 2;
						}
					})
				}else{
                    submitParentsCodes.forEach(function (val) {
                        if(val.cityCode == v.cityCode){
                            val.check_Child_State = 1;
                        }
                    })
                }
			}else if(v.level == 2){
                if(v.children.length == submitCodes[v.cityCode+10000].length){
                    submitParentsCodes.forEach(function (val) {
                        if(val.cityCode == v.cityCode){
                            val.check_Child_State = 2;
                        }
                    })
                }else if(v.children.length > submitCodes[v.cityCode+10000].length){
                    submitParentsCodes.forEach(function (val) {
                        if(val.cityCode == v.cityCode){
                            val.check_Child_State = 1;
                        }
                    })
                }
			}
		});

        http(prefix+"/add","post",
			{
                status:submitStatus,
                areaName:submitName,
                areaCode:areaCode,
                parentCode:$("#areaOfarea").val(),

                // submitCodes:JSON.stringify(submitCodes),
                submitParentsCodes:JSON.stringify(submitParentsCodes),
			},
			function(res){
            	if(res.code == 0){
                    $.modal.msgSuccess(res.msg);
                    fun();
				}else{
                    $.modal.alertError(res.msg);
				}

			}
        );
    }





</script>
</body>
</html>
